<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
    <div class="container-fluid">
      <!-- LOGO / Brand -->
      <router-link class="navbar-brand fw-bold" to="/">SuperDe</router-link>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- 左侧导航 -->
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <router-link class="nav-link" :to="{ name: 'recite' }">背诵</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" :to="{ name: 'read' }">阅读</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" :to="{ name: 'listen' }">听力</router-link>
          </li>
        </ul>

        <!-- 右侧导航 -->
        <ul class="navbar-nav mb-2 mb-lg-0">

          <!-- 未登录时 -->
          <li class="nav-item" v-if="!isLoggedIn">
            <router-link class="nav-link" :to="{ name: 'login' }">登录</router-link>
          </li>
          <li class="nav-item" v-if="!isLoggedIn">
            <router-link class="nav-link" :to="{ name: 'register' }">注册</router-link>
          </li>

          <!-- 已登录时 -->
          <li class="nav-item dropdown d-flex align-items-center" v-else>
            <!-- 圆形头像 + 用户名 -->
            <a
              class="nav-link dropdown-toggle d-flex align-items-center"
              href="#"
              id="userDropdown"
              role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <img
                :src="userAvatar"
                alt="avatar"
                class="rounded-circle me-2"
                style="width: 36px; height: 36px; object-fit: cover;"
              />
              <span><router-link class="dropdown-item" :to="{ name: 'profile' }">{{ userName }}</router-link></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
              <li>
                <router-link class="dropdown-item" :to="{ name: 'profile' }">个人主页</router-link>
              </li>
              <li><hr class="dropdown-divider" /></li>
              <li>
                <a class="dropdown-item" href="#" @click.prevent="handleLogout">登出</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: "Navbar",
  computed: {
    // 从 Vuex 的 getters 获取登录状态、用户信息
    ...mapGetters({
      isLoggedIn: 'isLoggedIn',
      currentUser: 'currentUser',
    }),
    userName() {
      return this.currentUser?.username || '佚名';
    },
    userAvatar() {
      // 如果用户对象里有 avatar，则显示，否则给个默认图
      return this.currentUser?.avatar || '/default-avatar.png';
    }
  },
  methods: {
    ...mapActions(['logout']),
    handleLogout() {
      this.logout();
      this.$router.push({ name: 'home' });
    }
  }
};
</script>

<style scoped>
.navbar {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  transition: background-color 0.3s ease;
}

.navbar-brand {
  font-size: 1.4rem;
}

.nav-link {
  font-size: 0.95rem;
  margin-right: 10px;
  color: #555 !important;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #4a90e2 !important;
}

.shadow-sm {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rounded-circle {
  border: 1px solid #ccc;
}
</style>
